<template>
	<view class="content">
		<!-- 头部区域 -->
		<view class="content-header">
			<image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
			<view class="loginbtn" v-if="openid === ''" @click="login">点击登录</view>

			<view v-else class="loginok">
				<view class="edit" @click="goTomy">编辑信息</view>
				<view class="userdata">
					<view style="width: 150rpx; height: 150rpx; border-radius: 50%; overflow: hidden;">
						<image style="width: 100%; height: 100%;" :src="userList.avatarUrl" mode=""></image>
					</view>
					<view class="mess-age">
						<text>{{ userList.realName }}</text>
						<text>{{ userList.telPhone || '' }}</text>
					</view>

				</view>

			</view>
		</view>

		<!-- 职位功能区域 -->
		<view class="content-work">
			<view  class="bigbox" @click="goToBaomin">
				<view style="width: 100rpx; height: 100rpx;">
					<image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/baoming.png" mode=""></image>
				</view>
				<text>报名记录</text>
			</view>
			<view class="bigbox" @click="goTotuijian">
				<view style="width: 100rpx; height: 100rpx;"  >
					<image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/tuijiannice.png" mode=""></image>
				</view>
				<text>推荐记录</text>
			</view>
			<view class="bigbox" @click="goToCollection" style="border: 0;">
				<view style="width: 100rpx; height: 100rpx;"  >
					<image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/shoucang.png" mode=""></image>
				</view>
				<text>收藏职位</text>
			</view>
		</view>
		
		
		<view class="hotsearch">
		  <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
		  更多
		</view>
		<!-- 具体操作区域 -->
		<view class="content-doing">
			<view class="doing-box">
				<u-cell-group>
					<u-cell @click="goTolucky" title="幸运转盘" :isLink="true"></u-cell>
					<u-cell @click="goTopoint" title="积分兑换" :isLink="true"></u-cell>
					<u-cell @click="goToposter" title="我的海报" :isLink="true"></u-cell>
					<u-cell @click="goToranking" title="推荐排行" :isLink="true"></u-cell>
					<view class="jifenguize">
						<u-cell @click="goToqiandao" title="签到积分" :isLink="true"></u-cell>
						<view @click="getinIntegralRule">积分规则</view>
					</view>

					<view class="contact-customer">
						<u-cell title="联系客服" :isLink="true"></u-cell>
						<button open-type="contact"></button>
					</view>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName: '', //微信昵称
				avatarUrl: '', //头像路径
				openid: '', //用户的openid 用于token
				userInfo: {
					realName: '', //微信昵称
					avatarUrl: '', //头像路径
					openId: '', //用户的openid 用于token
					otherOpenId: uni.getStorageSync('scene')
				},
				userList: {}
			};
		},
		onLoad(options) {
			console.log(uni.getStorageSync('userData'));
			const data = uni.getStorageSync('userData');
			this.nickName = data.nickName;
			this.avatarUrl = data.avatarUrl;
			this.openid = data.openid;
			this.userInfo.realName = data.nickName;
			this.userInfo.avatarUrl = data.avatarUrl;
			this.userInfo.openId = data.openid;
			// this.getuserinfo()

			console.log('==============', this.userInfo);
			console.log('==============', this.openid);
		},
		onShow() {
			//this.getuserinfo()
			if (uni.getStorageSync('userinfo') === '') {
				if (uni.getStorageSync('openid') == '') {
					return;
				} else {
					this.getuserinfo();
				}
			} else {
				this.userList = uni.getStorageSync('userinfo');
			}
		},
		methods: {
			login() {
				console.log(123);
				uni.navigateTo({
					url: '../loginpage/loginpage'
				});
			},

			// 获取用户真实信息
			async getuserinfo() {
				const {
					data
				} = await uni.$http.post('/jobSeeker/jobSeekerAdd', this.userInfo);
				this.userList = data.data.user;
				uni.setStorageSync('tokenName', data.data.tokenInfo.tokenName);
				uni.setStorageSync('tokenValue', data.data.tokenInfo.tokenValue);
				uni.setStorageSync('userinfo', this.userList);
				console.log('我是真实用户数据', this.userList);
				var scene = uni.getStorageSync('scene');
				if (scene != '') {
					const {
						datas
					} = await uni.$http.get('/jobSeeker/updateBind?openId=' + uni.getStorageSync('openid') +
						'&otherOpenId=' + scene);
				}
			},

			//我的信息页面
			goTomy() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/myMessage/myMessage?userList=' + JSON.stringify(this.userList)
					});
				}
			},
			// 报名记录
			goToBaomin() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/registrationRecord/registrationRecord'
					});
				}
			},
			// 推荐记录
			goTotuijian() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/tuijianRecords/tuijianRecords'
					});
				}
			},
			// 收藏职位
			goToCollection() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/Collection/Collection'
					});
				}
			},
			// 积分规则
			getinIntegralRule() {
				uni.navigateTo({
					url: '../../components/IntegralRule/IntegralRule'
				});
			},
			// 抽奖
			goTolucky() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/lucky/lucky'
					});
				}
			},
			// 积分兑换
			goTopoint() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/pointEchange/pointEchange'
					});
				}
			},
			// 我的海报
			goToposter() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/poster/poster'
					});
				}
			},
			// 推荐排行
			goToranking() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/Ranking/Ranking'
					});
				}
			},
			// 签到积分
			goToqiandao() {
				const openid = uni.getStorageSync('openid');
				if (openid == '') {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					});
				} else {
					uni.navigateTo({
						url: '../../components/qiandao/qiandao'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;

		.content-header {
			position: relative;
			height: 400rpx;

			.loginbtn {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				height: 70rpx;
				border-radius: 35rpx;
				color: #2589ff;
				background-color: #f7f7f7;
			}

			.loginok {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				// background-color: pink;
				.edit {
					height: 50;
					padding-right: 30rpx;
					padding-top: 30rpx;
					display: flex;
					justify-content: flex-end;
					font-size: 28rpx;
					color: #f7f7f7;
				}

				.userdata {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 200rpx;
					// height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.mess-age {
						width: 100%;
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						text {
							margin-top: 15rpx;
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				}
			}
		}

		.content-work {
			margin-top: 10rpx;
			background-color: #f7f7f7;
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-around;

			.bigbox {
				width: 200rpx;
				height: 200rpx;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-shadow: 0 0 40rpx #ccc;
			}

			
		}
		
		.hotsearch {
		  position: relative;
		  display: flex;
		  align-items: center;
		  height: 50rpx;
		  padding: 10rpx 20rpx;
		  margin-top: 10rpx;
		  color: #000000;
		  font-weight: bold;
		  view {
		    display: inline-block;
		    width: 10rpx;
		    height: 80%;
		    margin-right: 20rpx;
		  }
		  text {
		    position: absolute;
		    right: 20rpx;
		    font-size: 22rpx;
		    color: #a4a4a4;
		  }
		}

		/deep/ button::after {
			border: none;
			height: 0;
		}

		.jifenguize {
			position: relative;

			view {
				position: absolute;
				top: 15rpx;
				right: 140rpx;
				width: 130rpx;
				border-radius: 25rpx;
				height: 50rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
				color: #ffffff;
				background-color: #244dfc;
			}
		}

		.content-doing {
			margin-top: 10rpx;
			background-color: #f2f2f2;
			padding: 0 20rpx;

			.doing-box {
				background-color: #ffffff;

				.contact-customer {
					position: relative;

					button {
						width: 100%;
						height: 100%;
						background-color: transparent;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}
</style>
